<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收银台</title>
    <link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div class="container">
    <h1>收银台</h1>
    <div class="part recharge-money-wrapper">
        <h3>选择充值金额</h3>
        <ul class="clearfix pay-amount-list">
            <li class="pay-amount-item big active">
                <a>5000</a>
            </li>
            <li class="pay-amount-item big">
                <a>3000</a>
            </li>
            <li class="pay-amount-item big">
                <a>2000</a>
            </li>
            <li class="pay-amount-item big">
                <a>1000</a>
            </li>
            <li class="pay-amount-item small">
                <a>500</a>
            </li>
            <li class="pay-amount-item small">
                <a>300</a>
            </li>
            <li class="pay-amount-item small">
                <a>200</a>
            </li>
            <li class="pay-amount-item small">
                <a>100</a>
            </li>
            <li class="pay-amount-item small">
                <a>50</a>
            </li>
        </ul>
    </div>

    <div class="part pay-code-wrapper">
        <h3>输入付款码</h3>
        <div class="input-wrapper">
            <input type="text" class="pay-code-input">
        </div>
        <p class="error-msg"></p>
    </div>

    <div class="part pay-btn-wrapper">
        <button type="button" class="pay-btn btn">
            确认付款
        </button>
        <!--<a class="pay-logs-btn btn" href="pay_logs.html">-->
        <!--充值记录-->
        <!--</a>-->
    </div>

    <div class="part explication-wrapper clearfix">
        <h3>使用说明：</h3>
        <p>1. 打开收银台，选择充值金额</p>
        <p>2. 打开微信、支付。选择付款码，在此页面输入微信或者支付宝的付款码即可</p>
        <p>3. 输入付款码，点击确认付款</p>
        <a href="getpaycode.html" class="get-pay-code-link">如何获取付款码</a>
    </div>
</div>

<!-- 支付成功 弹出框 -->
<div class="pop-wrapper pay-success-pop hidden">
    <div class="pop-section">
        <h3 class="pop-title">
            <img src="images/pay_success_icon.jpg" alt="">
            付款成功
        </h3>
        <div class="pay-detail-wrapper">
            <p class="fz-30">
                <span class="pay-detail-title">充值金额：</span>
                <span class="pay-detail-amount"></span>元
            </p>
            <p class="fz-30">
                <span class="pay-detail-title">充值凭证：</span>
                <span class="pay-voucher-no"></span>
            </p>
        </div>

        <div class="pay-explanation-wrapper">
            <h4>充值说明</h4>
            <p>1. 充值完成之后，可以获得充值凭证，请妥善保管你的充值凭证，如果支付成功，也可以通过微信支付凭证中商品详情获取</p>
            <p>2. 登陆对应的公众号平台，在充值菜单里面，打开充值页面，输入充值凭证，完成充值</p>
        </div>

        <div class="buttons-wrapper">
            <button type="button" class="close-pop-btn">关闭</button>
        </div>
    </div>
</div>

<!-- 支付中 弹出框 -->
<div class="pop-wrapper paying-pop hidden">
    <div class="pop-section">
        <h1>支付中，微信中请输入支付密码...</h1>
    </div>
</div>

<!-- 温馨提示 弹出框 -->
<div class="pop-wrapper submit-paying-pop hidden">
    <div class="pop-section">
        <h3>温馨提示</h3>
        <p>请确认微信端是否已经输入支付密码完成支付，如果已完成请点击“确认”，如果微信端已取消此次交易点击“取消”</p>
        <div class="buttons-wrapper">
            <button type="button" class="submit-paying">确认</button>
            <button type="button" class="cancel-paying">取消</button>
        </div>
    </div>
</div>

<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>